<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
  
  <meta charset="utf-8" content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>detail</title>
  <link rel="stylesheet" href="/stylesheets/main.css">
  <link rel="stylesheet" href="../stylesheets/FlexiJsonEditor/jsoneditor.css"/> 

  <script type="text/javascript" src="./scripts/jquery-1.9.1.js"></script>
  <script src="./scripts/jquery.min.js"></script>
  <script src="./scripts/jquery.jsoneditor.js"></script>

<script type="text/javascript">


 $(function(){

        //drilling rule editor
        $('#drill_rules').change(function() {

        var  val = $('#drill_rules').val();

          if (val) {
              try { jsonTest = JSON.parse(val); }
              catch (e) { alert('Error in parsing json. ' + e); }
          } else {
                  jsonTest = {};
                }
        var  opt = { 
              change: function(jsonTest) { 
                $('#drill_rules').val(JSON.stringify(jsonTest));
              }
          };        
          $('#ruleEditor').jsonEditor(jsonTest,opt);
        });

        // script editor render
        $('#script').change(function() {

//alert("script");

          val = $('#script').val();

          if (val) {
              try { scriptJsonTest = JSON.parse(val); }
              catch (e) { alert('Error in parsing json. ' + e); }
          } else {
                  scriptJsonTest = {};
                }
          opt = { 
              change: function(scriptJsonTest) { 
                $('#script').val(JSON.stringify(scriptJsonTest));
              }
          };        
          $('#scriptEditor').jsonEditor(scriptJsonTest,opt);
        });

        //navigation rule editor render
        $('#navigate_rule').change(function() {
          //alert("script");

          var val = $('#navigate_rule').val();

          if (val) {
              try { jsonTest = JSON.parse(val); }
              catch (e) { alert('Error in parsing json. ' + e); }
          } else {
                  jsonTest = {};
                }
          var opt = { 
              change: function(jsonTest) { 
                $('#navigate_rule').val(JSON.stringify(jsonTest));
              }
          };        
          $('#naviEditor').jsonEditor(jsonTest,opt);
        });        

/////////////////////////////////////////////////////

        var drillRules = $.parseJSON($("#drill_rules").val());
        var  optRule = { 
              change: function(drillRules) { 
                $('#drill_rules').val(JSON.stringify(drillRules));
              }
          }; 

        $('#ruleEditor').jsonEditor(drillRules,optRule);  

/////////////////////////////////////////////////////

           var  scriptJson = $.parseJSON($("#script").val());
           var   optJS = { 
                  change: function(scriptJson) { 
                    $('#script').val(JSON.stringify(scriptJson));
                  }
              };  

            $('#scriptEditor').jsonEditor(scriptJson,optJS); 

/////////////////////////////////////////////////////             

           var naviRule = $.parseJSON($("#navigate_rule").val());
              var optNavi = { 
                  change: function(naviRule) { 
                    $('#navigate_rule').val(JSON.stringify(naviRule));
                  }
              };  

            $('#naviEditor').jsonEditor(naviRule,optNavi); 

        $('#form').submit(function(){
          
          $('#drill_rules').val(JSON.stringify(drillRules));
          $('#scriptJson').val(JSON.stringify(scriptJson)); 
          $('#navigate_rule').val(JSON.stringify(naviRule));          
        }); 
              

  });
</script>
</head>

<body>
<h1>New Drilling Rules</h1>

<hr style="width: 100%; height: 2px;"><a href="/rule">Return</a>

<form method="post" action="/rule/create" id="form" enctype="application/x-www-form-urlencoded">
  <table border="1" width="100%">
    <tbody>   
      <tr>
        <th>Domain</th>
        <td><input name="domain" id="domain" value="" size="30" type="text"></td>
      </tr>
     <tr>
        <th>url pattern</th>
        <td><input name="url_pattern" id="url_pattern" value="" size="30" type="text"></td>
      </tr>      
      <tr>
        <th>Alias</th>
        <td><input name="alias" value="" size="20" type="text"></td>
      </tr>
      <tr>
        <th>encoding</th>
        <td>  <label><input name="encoding" value="Y" type="radio" >UTF8</label>&nbsp;&nbsp; 
        <label><input name="encoding" value="N" checked="&quot;checked&quot;" type="radio">GB2312</label> </td>
      </tr>
      <tr>
        <th>type</th>
        <td>  <label><input name="type" value="Y" type="radio" >Brand</label>&nbsp;&nbsp; 
        <label><input name="type" value="N" checked="&quot;checked&quot;" type="radio">Node</label> </td>
      </tr>      
      <tr>
        <th>Extract content</th>
        <td>  <label><input name="save_page" value="Y" type="radio" >Yes</label>&nbsp;&nbsp; 
        <label><input name="save_page" value="N" checked="&quot;checked&quot;" type="radio">No</label> </td>               
      </tr>
      <tr>
        <th>jshandle<br>
        </th>
        <td>  <label><input name="jshandle" value="Y" type="radio" >Yes</label>&nbsp;&nbsp; 
        <label><input name="jshandle" value="N" checked="&quot;checked&quot;" type="radio">No</label> </td>  
      </tr>
      <tr>
        <th>cookie</th>
        <td> <textarea id="cookie" name="cookie" cols="130" rows="5"></textarea></td> 
      </tr>
      <tr>
        <th>Inject jquery</th> 
        <td>  <label><input name="inject_jquery" value="Y" type="radio" >Yes</label>&nbsp;&nbsp; 
        <label><input name="inject_jquery" value="N" checked="&quot;checked&quot;" type="radio">No</label> </td>               
      </tr>  
      <tr>
        <th>Load img</th>
        <td>  <label><input name="load_img" value="Y" type="radio" >Yes</label>&nbsp;&nbsp; 
        <label><input name="load_img" value="N" checked="&quot;checked&quot;" type="radio">No</label> </td>               
      </tr>  
      <tr>
        <th>Drill rules</th>
        <td>
        <div id="ruleEditor" class="json-editor"></div>
         <div id="ruleJson">
          <textarea id="drill_rules" name="drill_rules" cols="130" rows="10"></textarea>
        </div>
        </td>      
      </tr>  

      <tr>
        <th>script</th>
        <td>
        <div id="scriptEditor" class="json-editor"></div>
         <div id="scriptJsonDiv">
          <textarea id="script" name="script" cols="130" rows="10"></textarea>
        </div>
        </td>      
      </tr> 

      <tr>
        <th>navigate rule</th>
        <td>
        <div id="naviEditor" class="json-editor"></div>
         <div id="naviJson">
          <textarea id="navigate_rule" name="navigate_rule" cols="130" rows="10"></textarea>
        </div>
        </td>      
      </tr> 

      <tr>
        <th>stop page</th>
        <td> <input name="stoppage" id="stoppage" value="" size="30" type="text"></td>
      </tr> 
      <tr>
        <th>priority</th>
        <td> <input name="priority" id="priority" value="" size="30" type="text"></td> 
      </tr>  
      <tr>
        <th>weight</th>
        <td> <input name="weight" id="weight" value="" size="30" type="text"></td>
      </tr>  
      <tr>
        <th>schedule interval </th>
        <td> <input name="schedule_interval" id="schedule_interval" value="" size="30" type="text"></td>
      </tr>  
      <tr>
        <th>active</th>
        <td>  <label><input name="active" value="Y" type="radio" >Yes</label>&nbsp;&nbsp; 
        <label><input name="active" value="N" checked="&quot;checked&quot;" type="radio">No</label> </td>  
      </tr>  
    <tr>
        <th>seed</th>
        <td> <input name="seed" id="seed" value="" size="30" type="text"></td>
      </tr> 
      <tr>
        <th>schedule rule </th>
        <td> <input name="schedule_rule" id="schedule_rule" value="" size="30" type="text"></td>
      </tr> 
    </tbody>
  </table>
  <br>
<input type="submit" name="submit" id="submit" value="Submit"/>
<input type="reset" name="reset" id="reset" value="Reset"/>  
</form>
</body></html>